<template>
  <div class="shopinfo-container">
	  <!-- 小球   加入购物车 -->
	  <transition @before-enter="beforeEnter" @enter="Enter" @after-enter="afterEnter" >
		  <div class="ball" v-show="ballFlag" ref="ball"></div>
	  </transition>
	  

      <!-- 轮播图区域 -->
       <div class="mui-card">
			<div class="mui-card-content">
				<div class="mui-card-content-inner">
					<!-- 轮播图 子组件 -->
					<swiper :list="list" :isfull="false"></swiper>
				</div>
			</div>
		</div>
        <!-- 商品购买区域 -->
        <div class="mui-card">
			<div class="mui-card-header">{{godsinfo.title}}</div>
			<div class="mui-card-content">
				<div class="mui-card-content-inner">
				   <p class="price">
					  参考价格: <span class="price_old"> <del>￥{{godsinfo.market_price}}</del>	</span>
					   售价:<span class="price_new">￥{{godsinfo.sell_price}}</span>
				   </p>	
				   <p class="num">
					   购买数量：<numberbox @getcount="countchanged" :max="godsinfo.stock_quantity"></numberbox>
				   </p>
				   <p>
					   <mt-button type="primary" >立即购买</mt-button>
					   <mt-button type="danger" @click="getshopCar">加入购物车</mt-button>
				   </p>
				</div>
			</div>
		</div>
      <!-- 商品参数 -->
	   <div class="mui-card">
			<div class="mui-card-header">商品参数</div>
			<div class="mui-card-content">
				<div class="mui-card-content-inner">
					<div>
						<p>商品货号：{{godsinfo.goods_no}}</p>
						<p>库存情况：{{godsinfo.stock_quantity}}件</p>
						<p>上架时间：{{godsinfo.add_time | dateFormat}}</p>
					</div>
					
				</div>
			</div>
			<div class="mui-card-footer">
				<mt-button type="primary" size="large" plain @click="getgoodsDecs(id)">图文介绍</mt-button>
				<mt-button type="danger" size="large" plain @click="getgoodscomment(id)">商品评论</mt-button>
			</div>
		</div>
     		
  </div>
</template>
  
<script>
//导入轮播图子组件
import swiper from '../subcomponent/swiper.vue'
//导入商品购买数量子组件
import numberbox from '../subcomponent/shopinfo_numbox.vue'

export default {
  data(){
      return {
		  id:this.$route.params.id,
		  list:[],//存放轮播图数据
		  godsinfo:{},//存放商品详情数据
		  ballFlag:false,//管理小球状态
		  selectedGoodsCount:1,//默认选中1件商品
      }
  },
  created(){
	  this.getgodsinfoById()
	  this.getthumimages()
  },
  
  methods:{
     getgodsinfoById(){//根据id获取商品详情
		this.$http.get("api/goods/getinfo/"+this.id).then(result =>{
			if(result.body.status===0){
				this.godsinfo=result.body.message[0]
			}
		})
	 },
	  getthumimages(){//获取轮播图
		this.$http.get("api/getthumimages/"+this.id).then(result =>{
			if(result.body.status===0){
				console.log(result.body.message)
				//因为swiper组件渲染页面是item.img。但是swiper组件没有img，只有src，可以从新赋值
				result.body.message.forEach(item => {
					item.img=item.src
				});
				this.list=result.body.message
			}
		})
	  },
	  getgoodsDecs(id){//查看图文详情
	  //js编程式导航
		this.$router.push({ name: 'goodsDecs', params: {  id }})
	  },
	  getgoodscomment(id){//查看商品评论
		this.$router.push({ name: 'goodscomment', params: { id }})
	  },
	  //半场动画钩子函数
	  beforeEnter(el){
		  el.style.transform="translate(0, 0)"
	  },
	  Enter(el,done){
		  el.offsetWidth
		  //优化小球在不同分辨率及有滚定条时的位移
		  //获取小球相对视窗的位置
			const ballDist=this.$refs.ball.getBoundingClientRect()
		  //获取徽章相对视窗的位置
			const huizhangDist=document.getElementById("huizhang").getBoundingClientRect()
		  //获取top差值
		  const x=huizhangDist.top-ballDist.top
		  //获取left差值
		  const y=huizhangDist.left-ballDist.left
		  //利用模板字符串做拼接	
		  el.style.transform=`translate(${y}px, ${x}px)`
		  el.style.transition="all 0.5s cubic-bezier(.52,-0.29,.83,.67)"
		  done()
	  },
	  afterEnter(el){
		  this.ballFlag=!this.ballFlag
	  },
	  getshopCar(){//点击加入购物车
		this.ballFlag=!this.ballFlag
		var goodsinfo={
			id:this.id,
			count: parseInt(this.selectedGoodsCount),
			price:this.godsinfo.sell_price,
			selected:true
			}
		this.$store.commit("addtocar",goodsinfo)	
	  },
	  countchanged(count){//获取子组件数量
		//console.log("父组件得到的count是："+count)
		this.selectedGoodsCount=count
	  }
	 
  },
  components:{
		  swiper,//注册轮播图子组件
		  numberbox,//商品购买数量子组件

	  }
}
</script>


 <style lang="less" scoped>
 .shopinfo-container{
	 background-color: #eee;
	 overflow: hidden;
 }
 .price_new{
	 color:red;
	 font-weight: bold;
	
 }
 .mui-card-footer{
	 display: block;
	 button{
		 margin:15px 0;
	 }
 }
 .ball{
	 width: 15px;
	 height: 15px;
	 background-color: red;
	 border-radius: 50%;
	 position: absolute;
	 top:390px;
	 left:150px;
	 z-index:99;
	
 }
 </style>
  